<template>
  <span class="music">
    <img class="video_btn music_img" :style="{'animation-play-state':animat}" @click.stop="startvideo()" :src="isSpin?'https://cdn2.pluslegal.cn/music_on.png':'https://cdn2.pluslegal.cn/music_off.png'" alt="" />
  </span>
</template>
<script>
import Vue from 'vue';
import Global from '@/api/global_variable'
import Router from 'vue-router'
export default {
  data () {
    return {
      animat: this.GLOBAL.animat,
      isSpin: this.GLOBAL.isSpin
    }
  },
  mounted () {
    console.log('GLOBAL animat=====>', this.GLOBAL.animat)
    console.log('GLOBAL isSpin=====>', this.GLOBAL.isSpin)
  },

  methods: {
    startvideo () {
      let video = document.getElementById('bgmusic');
      if (video.paused) {
        video.play()
        this.isSpin = true
        this.GLOBAL.isSpin = this.isSpin
        //console.log('isSpin222=====>', this.isSpin)
      } else {
        video.pause()
        this.isSpin = false
        this.GLOBAL.isSpin = this.isSpin
        // console.log('isSpin333=====>', this.isSpin)
      }
    },
    spinSwitch () {
      this.isSpin = !this.isSpin
      // console.log('isSpin111=====>', this.isSpin)
      this.animat = this.animat === 'running' ? 'paused' : 'running'
      //console.log('animat111=====>', this.animat)
      this.GLOBAL.animat = this.animat
      this.GLOBAL.isSpin = this.isSpin
    },
    palyEnd () {
      let video = document.getElementById('bgmusic');
      video.addEventListener('ended', function () { //结束
        console.log("播放结束");
      }, false);
    },


  }
}
</script>
<style scoped>
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.music_img {
  z-index: 999;
  position: fixed;
  right: 0.3rem;
  top: 0.5rem;
  width: 0.3rem;
  height: 0.3rem;
  animation: spin 3s infinite linear;
}
.videoBox {
  z-index: -1;
  position: fixed;
  right: 0.3rem;
  top: 0.5rem;
  opacity: 0;
}
</style>